<template>
  <div class="room-details-section">
    <h3>房间明细统计</h3>
    <div class="details-table">
      <div class="details-header">
        <span>房间号</span>
        <span>服务次数</span>
        <span>总耗电(度)</span>
        <span>总费用(元)</span>
        <span>平均温度</span>
        <span>常用风速</span>
      </div>
      <div v-for="stat in sortedStats" :key="stat.roomId" class="details-row">
        <span class="room-id">{{ stat.roomId }}</span>
        <span>{{ stat.serviceCount }}</span>
        <span>{{ stat.totalPowerConsumption.toFixed(2) }}</span>
        <span class="cost">¥{{ stat.totalCost.toFixed(2) }}</span>
        <span>{{ stat.averageTemp.toFixed(1) }}°C</span>
        <span>{{ getFanSpeedText(stat.mostUsedFanSpeed) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { RoomStatistics } from '../../types/index';
import { FanSpeed } from '../../types/index';

const props = defineProps<{
  roomStats: RoomStatistics[];
}>();

const sortedStats = computed(() => {
  return [...props.roomStats].sort((a, b) => b.totalCost - a.totalCost);
});

const getFanSpeedText = (speed: FanSpeed): string => {
  const speedMap = {
    [FanSpeed.LOW]: '低风',
    [FanSpeed.MEDIUM]: '中风',
    [FanSpeed.HIGH]: '高风'
  };
  return speedMap[speed] || '未知';
};
</script>

<style scoped>
.room-details-section {
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #e0f2fe;
  margin-bottom: 24px;
}

h3 {
  margin: 0 0 16px 0;
  color: #334155;
  font-size: 16px;
  font-weight: 600;
}

.details-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.details-header,
.details-row {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 10px;
  padding: 12px;
  background: white;
  border-radius: 4px;
  align-items: center;
}

.details-header {
  font-weight: bold;
  background: #667eea;
  color: white;
}

.details-row:hover {
  background: #f0f0f0;
}

.room-id {
  font-weight: bold;
  color: #333;
}

.cost {
  font-weight: bold;
  color: #667eea;
}
</style>

